<template>
  <div class="homeBody">
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
      stripe
    >
      <el-table-column
        label="序号"
        type="index"
        align="center"
      ></el-table-column>
      <el-table-column
        label="考试时间"
        prop="time"
        width="120px"
        align="center"
      ></el-table-column>
      <el-table-column
        label="主办单位"
        prop="organizer"
        align="center"
      ></el-table-column>
      <el-table-column
        label="考试名称"
        prop="name"
        align="center"
      ></el-table-column>
      <el-table-column
        label="考试期数"
        prop="periods"
        align="center"
      ></el-table-column>
      <el-table-column
        label="证书名称"
        prop="certificate"
        align="center"
      ></el-table-column>
      <el-table-column
        label="考试费"
        prop="price"
        width="74px"
      ></el-table-column>
      <el-table-column
        label="报名开始"
        prop="start"
        align="center"
      ></el-table-column>
      <el-table-column
        label="报名截止"
        prop="stop"
        align="center"
      ></el-table-column>
      <el-table-column
        label="准考证时间"
        prop="admission"
        align="center"
      ></el-table-column>
      <el-table-column
        label="状态"
        prop="state"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="196px" align="center">
        <template slot-scope="scope">
          <!-- <router-link path='/details'> -->
          <el-button
            type="primary"
            @click="showDetails(scope.row.id)"
            size="mini"
            >查看</el-button
          >
          <!-- </router-link> -->
          <!-- <router-link path="/signUp"> -->
          <el-button
            type="primary"
            @click="register(scope.row.registerA)"
            size="mini"
            v-if="scope.row.state === '报名中'"
            >报名</el-button
          >
          <!-- </router-link> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      :total="30"
      :page-size="15"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      pageSize: 6,
      currentPage: 1,
      tableData: [
        {
          id: 1,
          time: "2020-10-21 9:00",
          organizer: "贵州省考试院",
          name: "成人高考",
          periods: "2020级",
          certificate: "入学资格",
          price: "120",
          start: "2021-03-21",
          stop: "2021-09-21",
          admission: "2021-10-10",
          state: "未到报名时间",
          detailsA: 0,
          show: 1,
        },
        {
          id: 2,
          time: "2020-12-15 10:00",
          organizer: "国家人设局",
          name: "称职英语",
          periods: "2020下半年",
          certificate: "称职英语合格证",
          price: "65",
          start: "2021-10-21",
          stop: "2021-11-01",
          admission: "2021-12-1",
          state: "报名中",
          detailsA: "查看详细",
          registerA: 1,
          show: 0,
        },
        {
          id: 3,
          time: "2020-12-21 10:00",
          organizer: "遵义市农业局",
          name: "农业烟叶技能",
          periods: "2020年第三期",
          certificate: "合格证",
          price: "0",
          start: "2021-10-01",
          stop: "2021-11-21",
          admission: "2021-12-01",
          state: "报名中",
          detailsA: "查看详细",
          registerA: 1,
          show: 0,
        },
        {
          id: 4,
          time: "2021-03-22 14:30",
          organizer: "KET英语考试",
          name: "剑桥大学",
          periods: "2020下半年",
          certificate: "合格证",
          price: "865",
          start: "2020-10-01",
          stop: "2020-12-01",
          admission: "2021-03-01",
          state: "报名中",
          detailsA: "查看详细",
          registerA: 1,
          show: 0,
        },
        {
          id: 3,
          time: "2020-12-21 10:00",
          organizer: "遵义市农业局",
          name: "农业烟叶技能",
          periods: "2020年第三期",
          certificate: "合格证",
          price: "0",
          start: "2021-10-01",
          stop: "2021-11-21",
          admission: "2021-12-01",
          state: "报名中",
          detailsA: "查看详细",
          registerA: 1,
          show: 0,
        },
        {
          id: 3,
          time: "2020-12-21 10:00",
          organizer: "遵义市农业局",
          name: "农业烟叶技能",
          periods: "2020年第三期",
          certificate: "合格证",
          price: "0",
          start: "2021-10-01",
          stop: "2021-11-21",
          admission: "2021-12-01",
          state: "报名中",
          detailsA: "查看详细",
          registerA: 1,
          show: 0,
        },
        {
          id: 3,
          time: "2020-12-21 10:00",
          organizer: "遵义市农业局",
          name: "农业烟叶技能",
          periods: "2020年第三期",
          certificate: "合格证",
          price: "0",
          start: "2021-10-01",
          stop: "2021-11-21",
          admission: "2021-12-01",
          state: "报名中",
          detailsA: "查看详细",
          registerA: 1,
          show: 0,
        },
        {
          id: 3,
          time: "2020-12-21 10:00",
          organizer: "遵义市农业局",
          name: "农业烟叶技能",
          periods: "2020年第三期",
          certificate: "合格证",
          price: "0",
          start: "2021-10-01",
          stop: "2021-11-21",
          admission: "2021-12-01",
          state: "报名中",
          detailsA: "查看详细",
          registerA: 1,
          show: 0,
        },
        {
          id: 3,
          time: "2020-12-21 10:00",
          organizer: "遵义市农业局",
          name: "农业烟叶技能",
          periods: "2020年第三期",
          certificate: "合格证",
          price: "0",
          start: "2021-10-01",
          stop: "2021-11-21",
          admission: "2021-12-01",
          state: "报名中",
          detailsA: "查看详细",
          registerA: 1,
          show: 0,
        },
        {
          id: 3,
          time: "2020-12-21 10:00",
          organizer: "遵义市农业局",
          name: "农业烟叶技能",
          periods: "2020年第三期",
          certificate: "合格证",
          price: "0",
          start: "2021-10-01",
          stop: "2021-11-21",
          admission: "2021-12-01",
          state: "报名中",
          detailsA: "查看详细",
          registerA: 1,
          show: 0,
        },
        {
          id: 3,
          time: "2020-12-21 10:00",
          organizer: "遵义市农业局",
          name: "农业烟叶技能",
          periods: "2020年第三期",
          certificate: "合格证",
          price: "0",
          start: "2021-10-01",
          stop: "2021-11-21",
          admission: "2021-12-01",
          state: "报名中",
          detailsA: "查看详细",
          registerA: 1,
          show: 0,
        },
      ],
      // registerB:'none',
      // showDetailsB:''
    };
  },
  created() {
    let tableDataItem = [];
    tableDataItem.push(this.tableData);
    // console.log(tableDataItem)
    // console.log(111)
    localStorage.setItem("tableData", JSON.stringify(tableDataItem));
    var myDate = new Date();
    let nowDate = myDate.toLocaleDateString();
    console.log(nowDate);
  },
  methods: {
    showDetails(id, details) {
      console.log(id);
      this.$router.push({
        path: "details",
        query: {
          id: details,
        },
      });
    },
    register(registerA) {
      // console.log(registerA);
      // console.log(this.show)
      if (registerA === 1) {
        this.$router.push({
          path: "signUp",
          query: {
            id: this.tableData.id,
          },
        });
      }
    },
    handleCurrentChange: function (newPage) {
      console.log(newPage);
      this.currentPage = newPage;
    },
    handleSizeChange: function (newSize) {
      console.log(newSize);
      this.pageSize = newSize;
    },
  },
};
</script>

<style lang="scss" scoped>
div .homeBody {
  display: flex;
  flex-direction: column;
  height: 680px;
  .el-table {
    margin-top: 50px;
    flex: 1;
  }
}
.el-pagination {
  // flex: 1;
  // position: fixed;
  margin: 50px auto;
}
</style>